<div class="feature-view">
	<!-- Scrum Widget -->
	<div id="scrum-widget-view" class="col-lg-12 col-sm-6 animate-show" ng-show="ctrl.showStatus.scrum">
		<div class="widget">
			<div class="widget-body">
				<div class="col-xs-9.5 text-standard-sm dash-overflow">
                    Project: <em>{{ctrl.projectName}}</em>
                </div>
                <div class="col-xs-9.5 text-standard-sm dash-overflow">
                    Team: <em>{{ctrl.teamName}}</em>
                </div>
			</div>

			<div class="widget-heading">
				<div class="iteration-change-btn text-standard-sm">Iteration:
					<button id="next-btn" class="pull-right btn-default btn-xm active" ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.animateAgileView(true)">>></button>
					<button id="pause-btn" class="pull-right btn-default btn-xm active" ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.pauseAgileView()" ng-model="ctrl.pausePlaySymbol">{{ctrl.pausePlaySymbol}}</button>
				</div>
				<div ng-repeat="iteration in ctrl.iterations">
					<div class="col-xs-2.5 text-lg pull-right">
						{{iteration.tilEnd}}
					</div>
					<div class="col-xs-9.5 text-lg dash-overflow feature-link" ng-if="iteration.url !== undefined && iteration.url !== null && iteration.url !== ''">
                        <a ng-href="{{::iteration.url}}" target="_blank">{{iteration.name}}</a>
                    </div>
                    <div class="col-xs-9.5 text-lg dash-overflow" ng-if="iteration.url === undefined || iteration.url === null || iteration.url === ''">
                        {{iteration.name}}
                    </div>
				</div>
			</div>

			<div class="widget-body" fit-text=".build-summary-count > span" fit-text-max="40">
				<div class="row">
					<div class="col-xs-4">
						<div class="story-summary-count story-open">
							<span>{{ctrl.openStoryPoints}}</span>
						</div>
						<div class="story-summary-type">Open</div>
					</div>
					<div class="col-xs-4">
						<div class="story-summary-count story-wip">
							<span>{{ctrl.wipStoryPoints}}</span>
						</div>
						<div class="story-summary-type">WIP</div>
					</div>
					<div class="col-xs-4">
						<div class="story-summary-count story-done">
							<span>{{ctrl.doneStoryPoints}}</span>
						</div>
						<div class="story-summary-type">Done</div>
					</div>
				</div>
			</div>
		</div>

		<div class="widget">
			<div class="widget-body" ng-if="ctrl.listType === 'epics'">
				<div class="widget-heading">Epics in Progress
					<button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton" ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-</button>
				</div>
				<div class="dash-row" ng-repeat="epic in ctrl.epicStoryPoints | limitTo:ctrl.featureLimit">
					<div class="pull-right">{{epic.sEstimate}}</div>
					<div class="dash-overflow feature-link" ng-if="epic.sEpicUrl !== undefined && epic.sEpicUrl !== null && epic.sEpicUrl !== ''">
                        <a ng-href="{{::epic.sEpicUrl}}" target="_blank">{{epic.sEpicName}}</a>
                    </div>
                    <div class="dash-overflow" ng-if="epic.sEpicUrl === undefined || epic.sEpicUrl === null || epic.sEpicUrl === ''">
                        {{epic.sEpicName}}
                    </div>
				</div>
			</div>
			
			<div class="widget-body" ng-if="ctrl.listType === 'issues'">
                <div class="widget-heading">Issues in Progress
                    <button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton" ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-</button>
                </div>
                <div class="dash-row" ng-repeat="issue in ctrl.issueStoryPoints | limitTo:ctrl.featureLimit">
                    <div class="pull-right" ng-if="ctrl.estimateMetricType === 'storypoints'">{{issue.sEstimate}}</div>
                    <div class="pull-right" ng-if="ctrl.estimateMetricType === 'hours'">{{issue.sEstimateTime}}</div>
                    <div class="feature-link" ng-if="issue.sUrl !== undefined && issue.sUrl !== null && issue.sUrl !== ''">
                        <div class="dash-overflow" ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">
                            <a ng-href="{{::issue.sUrl}}" target="_blank">{{issue.sName}}</a>
                        </div>
                        <div class="dash-overflow issue-done" ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">
                            <a ng-href="{{::issue.sUrl}}" target="_blank">{{issue.sName}}</a>
                        </div>
                    </div>
                    <div ng-if="issue.sUrl === undefined || issue.sUrl === null || issue.sUrl === ''">
                        <div class="dash-overflow" ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">{{issue.sName}}</div>
                        <div class="dash-overflow issue-done" ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">{{issue.sName}}</div>
                    </div>
                </div>
            </div>
		</div>
	</div>

	<!-- Kanban Widget -->
	<div id="kanban-widget-view" class="col-lg-12 col-sm-6 animate-show" ng-show="ctrl.showStatus.kanban">
		<div class="widget">
			<div class="widget-body">
				<div class="col-xs-9.5 text-standard-sm dash-overflow">
                    Project: <em>{{ctrl.projectName}}</em>
                </div>
                <div class="col-xs-9.5 text-standard-sm dash-overflow">
                    Team: <em>{{ctrl.teamName}}</em>
                </div>
			</div>

			<div class="widget-heading">
				<div class="iteration-change-btn text-standard-sm">Iteration:
					<button id="next-btn" class="pull-right btn-default btn-xm active" ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.animateAgileView(true)">>></button>
					<button id="pause-btn" class="pull-right btn-default btn-xm active" ng-show="ctrl.numberOfSprintTypes === 2" ng-click="ctrl.pauseAgileView()" ng-model="ctrl.pausePlaySymbol">{{ctrl.pausePlaySymbol}}</button>
				</div>
				<div ng-repeat="iteration in ctrl.iterationsKanban">
					<div class="col-xs-2.5 text-lg pull-right">
						{{iteration.tilEnd}}
					</div>
					<div class="col-xs-9.5 text-lg dash-overflow">
						<em>{{iteration.name}}</em>
					</div>
				</div>
			</div>

			<div class="widget-body" fit-text=".build-summary-count > span" fit-text-max="40">
				<div class="row">
					<div class="col-xs-6">
						<div class="story-summary-count story-open">
							<span>{{ctrl.openStoryPointsKanban}}</span>
						</div>
						<div class="story-summary-type">Open</div>
					</div>
					<div class="col-xs-6">
						<div class="story-summary-count story-wip">
							<span>{{ctrl.wipStoryPointsKanban}}</span>
						</div>
						<div class="story-summary-type">WIP</div>
					</div>
				</div>
			</div>
		</div>

		<div class="widget">
			<div class="widget-body" ng-if="ctrl.listType === 'epics'">
				<div class="widget-heading">Epics in Progress
					<button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton" ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-</button>
				</div>
				<div class="dash-row" ng-repeat="epic in ctrl.epicStoryPointsKanban | limitTo:ctrl.featureLimit">
					<div class="pull-right">{{epic.sEstimate}}</div>
					<div class="dash-overflow feature-link" ng-if="epic.sEpicUrl !== undefined && epic.sEpicUrl !== null && epic.sEpicUrl !== ''">
                        <a ng-href="{{::epic.sEpicUrl}}" target="_blank">{{epic.sEpicName}}</a>
                    </div>
                    <div class="dash-overflow" ng-if="epic.sEpicUrl === undefined || epic.sEpicUrl === null || epic.sEpicUrl === ''">
                        {{epic.sEpicName}}
                    </div>
				</div>
			</div>
			
			<div class="widget-body" ng-if="ctrl.listType === 'issues'">
                <div class="widget-heading">Issues in Progress
                    <button class="pull-right btn-default btn-xm active" ng-show="ctrl.showFeatureLimitButton" ng-click="ctrl.setFeatureLimit()" ng-init="ctrl.featureLimit=4">+/-</button>
                </div>
                <div class="dash-row" ng-repeat="issue in ctrl.issueStoryPointsKanban | limitTo:ctrl.featureLimit">
                    <!-- If ctrl.estimateMetricType === 'count', we don't display the estimate number since it doesn't make sense to display 1 against each issue -->
                    <div class="pull-right" ng-if="ctrl.estimateMetricType === 'storypoints'">{{issue.sEstimate}}</div>
                    <div class="pull-right" ng-if="ctrl.estimateMetricType === 'hours'">{{issue.sEstimateTime}}</div>
                    <div class="feature-link" ng-if="issue.sUrl !== undefined && issue.sUrl !== null && issue.sUrl !== ''">
                        <div class="dash-overflow" ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">
                            <a ng-href="{{::issue.sUrl}}" target="_blank">{{issue.sName}}</a>
                        </div>
                        <div class="dash-overflow issue-done" ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">
                            <a ng-href="{{::issue.sUrl}}" target="_blank">{{issue.sName}}</a>
                        </div>
                    </div>
                    <div ng-if="issue.sUrl === undefined || issue.sUrl === null || issue.sUrl === ''">
                        <div class="dash-overflow" ng-if="issue.sStatus !== 'done' && issue.sStatus !== 'accepted'">{{issue.sName}}</div>
                        <div class="dash-overflow issue-done" ng-if="issue.sStatus === 'done' || issue.sStatus === 'accepted'">{{issue.sName}}</div>
                    </div>
                </div>
            </div>
		</div>
	</div>

	<!-- Error View -->
	<div id="error-view" class="col-lg-12 col-sm-6" ng-hide="ctrl.showStatus.scrum || ctrl.showStatus.kanban">
		<div class="widget-heading">
			<div class="text-standard-sm text-warning">[No Active Iterations]</div>
		</div>
	</div>
</div>
